<template>
  <div class="app-container paper-index">
    <!-- 顶部banner区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="page-title">论文首页</h1>
        <p class="subtitle">高静文 | 数据科学与大数据技术专业</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <el-row :gutter="30">
        <!-- 个人信息卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-user-circle header-icon"></i>
              <span class="header-title">个人信息</span>
            </div>
            <div class="profile-content">
              <div class="avatar">
                <div class="avatar-circle">
                  <img src="@/assets/logo/logo.png" alt="头像" class="avatar-img">
                </div>
                <div class="avatar-badge">
                  <el-badge is-dot :type="'success'" class="user-status"></el-badge>
                </div>
              </div>
              <div class="profile-info">
                <h3 class="user-name">高静文</h3>
                <div class="info-item">
                  <i class="el-icon-s-claim"></i>
                  <span><strong>学号：</strong>116420220077</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-collection-tag"></i>
                  <span><strong>专业：</strong>数据科学与大数据技术</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-date"></i>
                  <span><strong>年级：</strong>2022级</span>
                </div>
                <div class="info-item">
                  <i class="el-icon-message"></i>
                  <span><strong>邮箱：</strong>gaojingwen@example.com</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 论文信息卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-document header-icon"></i>
              <span class="header-title">论文信息</span>
            </div>
            <div class="paper-info">
              <h3 class="paper-title">{{ paperTitle }}</h3>
              <div class="info-item">
                <i class="el-icon-user"></i>
                <span><strong>指导教师：</strong>{{ advisor }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-folder"></i>
                <span><strong>论文类型：</strong>{{ paperType }}</span>
              </div>
              <div class="info-item">
                <i class="el-icon-calendar"></i>
                <span><strong>完成时间：</strong>{{ completionDate }}</span>
              </div>
              <div class="info-item status-item">
                <i class="el-icon-check"></i>
                <span><strong>状态：</strong></span>
                <el-tag :type="getStatusType(paperStatus)" class="status-tag">
                  {{ paperStatus }}
                </el-tag>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 论文进度卡片 -->
        <el-col :xs="24" :sm="24" :md="8">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-timer header-icon"></i>
              <span class="header-title">论文进度</span>
            </div>
            <div class="progress-info">
              <div class="progress-percentage">{{ progressPercentage }}%</div>
              <el-progress
                :percentage="progressPercentage"
                :status="progressStatus"
                :stroke-width="8"
                class="progress-bar"
              ></el-progress>
              <div class="progress-steps">
                <div
                  v-for="(step, index) in progressSteps"
                  :key="index"
                  class="step-item"
                  :class="{ 'step-completed': step.completed }"
                >
                  <div class="step-number" :class="{ completed: step.completed }">
                    <i v-if="step.completed" class="el-icon-check"></i>
                    <span v-else>{{ index + 1 }}</span>
                  </div>
                  <div class="step-label">{{ step.label }}</div>
                  <div class="step-line" v-if="index < progressSteps.length - 1"></div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="30" style="margin-top: 30px;">
        <!-- 论文结论卡片 -->
        <el-col :xs="24">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-data-line header-icon"></i>
              <span class="header-title">论文结论</span>
            </div>
            <div class="conclusion-content">
              <p>{{ paperConclusion }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="30" style="margin-top: 30px;">
        <!-- 主要研究成果 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-medal header-icon"></i>
              <span class="header-title">主要研究成果</span>
            </div>
            <div class="achievements">
              <ul>
                <li v-for="(achievement, index) in achievements" :key="index" class="achievement-item">
                  <div class="achievement-icon"><i class="el-icon-success"></i></div>
                  <div class="achievement-text">{{ achievement }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>

        <!-- 后续研究方向 -->
        <el-col :xs="24" :md="12">
          <el-card class="info-card card-hover">
            <div slot="header" class="card-header">
              <i class="el-icon-trend-charts header-icon"></i>
              <span class="header-title">后续研究方向</span>
            </div>
            <div class="future-work">
              <ul>
                <li v-for="(work, index) in futureWorks" :key="index" class="work-item">
                  <div class="work-icon"><i class="el-icon-aim"></i></div>
                  <div class="work-text">{{ work }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaperIndex',
  data() {
    return {
      // 论文信息
      paperTitle: '基于深度学习的智能推荐系统研究',
      advisor: '张教授',
      paperType: '学术论文',
      completionDate: '2025-06-30',
      paperStatus: '已完成',

      // 进度信息
      progressPercentage: 100,
      progressStatus: 'success',
      progressSteps: [
        { label: '选题', completed: true },
        { label: '开题报告', completed: true },
        { label: '文献综述', completed: true },
        { label: '实验设计', completed: true },
        { label: '论文撰写', completed: true },
        { label: '论文答辩', completed: true }
      ],

      // 论文结论
      paperConclusion: '本研究提出了一种基于深度学习的智能推荐系统，通过结合用户行为数据和内容特征，实现了更精准的个性化推荐。实验结果表明，该系统在推荐准确率、召回率和用户满意度方面都显著优于传统方法。研究成果为智能推荐领域提供了新的思路和方法，具有重要的理论意义和实际应用价值。',

      // 研究成果
      achievements: [
        '提出了一种融合多模态特征的深度学习推荐模型',
        '设计了高效的用户兴趣演化建模方法',
        '在公开数据集上取得了领先的性能指标',
        '发表相关学术论文2篇'
      ],

      // 后续研究方向
      futureWorks: [
        '探索知识图谱与深度学习的结合应用',
        '研究跨域推荐技术，实现多平台数据协同',
        '优化模型在大规模数据上的性能和效率',
        '开发实用的推荐系统原型并进行实际应用测试'
      ]
    }
  },
  methods: {
    // 根据论文状态返回对应的标签类型
    getStatusType(status) {
      const statusMap = {
        '已完成': 'success',
        '进行中': 'primary',
        '待修改': 'warning',
        '未开始': 'info'
      }
      return statusMap[status] || 'info'
    }
  },
  mounted() {
    // 添加页面进入动画效果
    const cards = document.querySelectorAll('.card-hover')
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.classList.add('card-visible')
      }, 100 * index)
    })
  }
}
</script>

<style scoped>
/* 全局样式 */
.paper-index {
  min-height: 100vh;
  background-color: white;
  padding-bottom: 40px;
}

/* Banner样式 */
.banner {
  background-color: white;
  color: #333;
  padding: 60px 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #f0f0f0;
}

.banner-content {
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
  font-weight: 400;
}

/* 内容容器 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: -40px;
}

/* 卡片通用样式 */
.info-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.card-visible {
  opacity: 1;
  transform: translateY(0);
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #f0f0f0;
}

.header-icon {
  font-size: 20px;
  color: #1890ff;
  margin-right: 10px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 个人信息卡片样式 */
.profile-content {
  padding: 25px;
  text-align: center;
}

.avatar {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.avatar-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #1890ff;
  background: white;
  padding: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.avatar:hover .avatar-img {
  transform: scale(1.05);
}

.avatar-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.user-status {
  transform: scale(1.2);
}

.user-name {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 14px;
}

.info-item i {
  margin-right: 8px;
  color: #1890ff;
  font-size: 16px;
}

.status-item {
  justify-content: center;
  align-items: center;
}

.status-tag {
  margin-left: 8px;
  font-size: 13px;
  padding: 4px 12px;
}

/* 论文信息卡片样式 */
.paper-info {
  padding: 25px;
}

.paper-title {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

/* 进度卡片样式 */
.progress-info {
  padding: 25px;
}

.progress-percentage {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 20px;
}

.progress-bar {
  margin-bottom: 30px;
}

.progress-steps {
  position: relative;
  padding-left: 30px;
}

.step-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.step-number {
  position: absolute;
  left: -30px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #e8e8e8;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  z-index: 1;
}

.step-number.completed {
  background-color: #52c41a;
  color: white;
}

.step-label {
  color: #666;
  font-size: 14px;
  transition: color 0.3s ease;
}

.step-completed .step-label {
  color: #52c41a;
  font-weight: 500;
}

.step-line {
  position: absolute;
  left: -20px;
  top: 28px;
  width: 2px;
  height: 20px;
  background-color: #e8e8e8;
}

.step-completed .step-line {
  background-color: #52c41a;
}

/* 论文结论卡片样式 */
.conclusion-content {
  padding: 25px;
}

.conclusion-content p {
  color: #555;
  line-height: 1.8;
  text-indent: 2em;
  font-size: 15px;
  margin: 0;
}

/* 研究成果卡片样式 */
.achievements, .future-work {
  padding: 25px;
}

.achievements ul, .future-work ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.achievement-item, .work-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 3px solid #e8e8e8;
  transition: all 0.3s ease;
}

.achievement-item:hover, .work-item:hover {
  border-left-color: #1890ff;
  transform: translateX(5px);
}

.achievement-icon, .work-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0f9ff;
  color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.work-icon {
  background: #fff7e6;
  color: #fa8c16;
}

.achievement-text, .work-text {
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 32px;
  }

  .subtitle {
    font-size: 16px;
  }

  .banner {
    padding: 40px 0;
  }

  .avatar-circle {
    width: 120px;
    height: 120px;
  }

  .content-wrapper {
    padding: 0 15px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 28px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 24px;
  }

  .info-item i {
    position: absolute;
    left: 0;
  }
}
</style>
